﻿<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!-- <link rel="stylesheet" href="bootstrap.css"> -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/bootstrap-slider.min.css" rel="stylesheet">
    <!-- http://www.htmleaf.com/Demo/201502041325.html -->
    <title>Smart HiFi DAC</title>
    <style>
        .footer {
            position: fixed;
            bottom: 0;
            width: 100%;
            height: 60px;
            /* Set the fixed height of the footer here */
            line-height: 60px;
            /* Vertically center the text there */
            background-color: #f5f5f5;
        }

        #vol-slider .slider-selection {
            background: rgb(0, 155, 245);
        }

        button {
            margin: 30px, 20px, 30px, 20px;
            width: 90px;
        }
    </style>
</head>

<body>
    <nav class="navbar navbar-default" role="navigation">
        <div class="container-fluid" style="margin-right: 50px">
            <div class="navbar-header">
                <a class="navbar-brand" href="#" style="color: darkcyan">Smart HiFi DAC</a>
            </div>

            <div>
                <ul class="nav navbar-nav navbar-right">
                    <li class="nav-item">
                        <a class="active" href="/info.html">Info</a>
                    </li>
                    <li class="nav-item">
                        <a href="/setup.html">Setup</a>
                    </li>
                    <li class="nav-item">
                        <a href="/control.html">Control</a>
                    </li>
                    <li class="nav-item">
                        <a href="/remote.html">Remote</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <div style="width:600px;margin: 0 auto">
        <h3 style="text-align:center;color: dodgerblue">Control</h3>
        <hr>
    </div>
    <div style=" width:600px;margin: 0 auto">
        <p>
            <strong>Power:</strong>
        </p>
        <div class="row" style="text-align: center">
            <div class="col" style="margin-top:20px;margin-bottom: 20px ">
                <button class="btn btn-default" id="btn_power">Power</button>
            </div>
        </div>
    </div>
    <div style="width:600px;margin: 0 auto">
        <hr>
    </div>
    <div style=" width:600px;margin: 0 auto">
        <p>
            <strong>Input Select:</strong>
        </p>
        <div class="row" style="text-align: center">
            <div class="col" style="margin-top:30px;margin-bottom: 30px ">
                <button class="btn btn-default" id="btn_0" onclick="on_click(0)">Optical-1</button>

                <button class="btn btn-default" id="btn_1" onclick="on_click(1)">Optical-2</button>

                <button class="btn btn-default" id="btn_2" onclick="on_click(2)">Coax-1</button>

                <button class="btn btn-default" id="btn_3" onclick="on_click(3)">Coax-1</button>

                <button class="btn btn-default" id="btn_4" onclick="on_click(4)">I2S IN</button>
            </div>

        </div>
    </div>
    <div style="width:600px;margin: 0 auto">
        <hr>
    </div>
    <div style="width:600px;margin: 0 auto">
        <p>
            <strong>Volume Control:</strong>
        </p>
        <div class="row" style="text-align: center;">
            <div class="col" style="margin-top:30px;margin-bottom: 30px ">
                <div>
                    <strong>0</strong>
                    <input style="width: 400px;" id="vol" data-slider-id='vol-slider' type="text" data-slider-min="0"
                        data-slider-max="100" data-slider-step="1" data-slider-value="50" />
                    <strong>100</strong>
                </div>
            </div>
        </div>
    </div>
    <div style="width:600px;margin: 0 auto">
        <hr>
    </div>

    <div style="height: 60px;"></div>
    <footer class="footer">
        <div class="container">
            <div style="text-align: center">Copyright ©2017-2019 Suzhou All Rights Reserved.</div>
        </div>
    </footer>
    <script src="js/jquery-2.1.0.min.js"></script>
    <script type='text/javascript' src="js/bootstrap-slider.min.js"></script>
</body>

<script>
    $(document).ready(function () {
        get_dac_status();
    });

    function get_dac_status() {
        $.ajax({
            type: 'POST',
            url: "get_dac_status",
            data: "",
            dataType: 'json',
            success: function (data) {
                console.log(data);
                var btn_id = "#btn_" + data.source;
                for (i = 0; i < 5; i++) {
                    var btn = "#btn_" + i;
                    $(btn).removeClass("btn-default");
                    $(btn).removeClass("btn-info");
                }
                $(btn_id).addClass("btn-info");
                $('#vol').slider("setValue", data.volume, false, false);
                //alert("Success");
            },
            error: function (data) {
                console.log('Failed！');
                //alert("Failed");
            },
        });
    }
    setInterval(get_dac_status, 1000);
    $('#vol').slider({
        tooltip: 'always',
        formatter: function (value) {
            return 'VOL: ' + value;
        }
    });
    $('#vol').on("slideStop", function (event) {
        //console.log("value:" + event.value);
        var vol = {
            'volume': parseInt(event.value),
        };
        ajax_send("set_volume", vol);
    })
    // $('#vol').on("change", function (event) {
    //     console.log("value:" + event.value.oldValue);
    // })
    function on_click(id) {
        var btn_id = "#btn_" + id;
        for (i = 0; i < 5; i++) {
            var btn = "#btn_" + i;
            $(btn).removeClass("btn-default");
            $(btn).removeClass("btn-info");
        }
        $(btn_id).addClass("btn-info");
        var source = {
            'source': parseInt(id),
        };
        ajax_send("set_source", source);
    }

    function ajax_send(url, data) {
        $.ajax({
            type: 'POST',
            url: url,
            data: JSON.stringify(data),
            dataType: 'json',
            success: function (data) {
                console.log(data);
                if (data.status = "success") {
                    // if (cmd[6] == 0x01) {
                    //     $(btn_id).text("OFF");
                    //     $(img_id).attr("src", "on.png");
                    // } else {
                    //     $(btn_id).text("ON");
                    //     $(img_id).attr("src", "off.png");
                    // }
                }
                //alert("Success");
            },
            error: function (data) {
                console.log('Failed！');
                //alert("Failed");
            },
        });
    }
</script>
</body>

</html>